<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>气泡图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
  const Animate = F2.Animate;
  Animate.registerAnimation('circleOut', function(shape, animateCfg) {
    const trueRadius = shape.attr('r');
    let r = 0;
    if (shape.get('cacheShape')) {
      r = shape.get('cacheShape').attrs.r;
    }
    shape.attr('r', r);
    shape.animate().to({
      attrs: {
        r: trueRadius
      },
      duration: animateCfg.duration,
      easing: animateCfg.easing
    });

  });
  $.getJSON('./data/bubble.json', data => {
    const chart = new F2.Chart({
      id: 'mountNode',
      width: window.innerWidth,
      height: window.innerWidth * 0.64,
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data, {
      LifeExpectancy: {
        alias: '人均寿命（年）',
        tickCount: 5
      },
      GDP: {
        alias: '人均国内生产总值($)'
      },
      Country: {
        alias: '国家/地区'
      }
    });
    chart.axis('GDP', {
      label(value){
        return {
          text: (value / 1000).toFixed(0) + 'k'
        };
      }
    });
    chart.axis('GDP', {
      label(text, index, total) {
        const textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        }
        if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.tooltip(false);
    chart.point().position('GDP*LifeExpectancy')
      .size('Population', [ 4, 65 ])
      .color('continent')
      .style({
        fillOpacity: 0.65
      })
      .animate({
        appear: {
          animation: 'circleOut',
          duration: 250
        },
        update: {
          animation: 'circleOut',
          duration: 250

        }
      });
    chart.render();
  });
</script>
</body>
</html>
